n
<template>
  <div class="amusement">
    <main-nav-bar />
    <!-- 搜索框 -->
    <div class="search_box">
      <div class="search">
        <span class="address">
          <LocationPostion></LocationPostion>
        </span>
        <el-input placeholder="请输入内容" v-model="searchVal" class="input_search">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>

        <el-button type="primary" class="btn_search" @click="search">搜索</el-button>
      </div>
    </div>
    <!-- 保姆列表 -->
    <div class="mainBox" v-for="(key ,index) in userList " :key="index">
      <div class="imgBox">
        <img :src="key.img" />
      </div>
      <div class="detail">
        <ul>
          <li class="name">{{key.name}}</li>
          <li class="sex">{{key.sex}}</li>
          <li class="birth">{{key.birthday}}</li>
          <li class="education">{{key.education}}</li>
          <li class="type">{{key.type}}</li>
          <li class="state" v-if="key.state==1">在线</li>
          <li class="state" v-if="key.state==0">离线</li>
        </ul>
      </div>
      <div class="btnBox">
        <el-row class="btn">
          <el-button type="primary"  class="btn_home" @click="open">123家政公司</el-button>
          <el-button type="info" class="btn_see" @click="open">预约面试</el-button>
          <el-button class="btn_detail" @click="goDetail(key.id)">查看详情</el-button>
        </el-row>
      </div>
    </div>
    <!-- 留言分页pc -->
    <div class="row">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-sizes="[4, 6, 8]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import MainNavBar from '@/common/NavBar/MainNavBar.vue'
import LocationPostion from '@/common/LocationPostion.vue'
import qs from 'qs'
export default {
  data() {
    return {
      pageSize: 5,
      currentPage: 1,
      total: 0,
      userList: [],
      searchVal: '',
    }
  },
  components: {
    MainNavBar,
    LocationPostion,
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      const { data } = await this.$http.get(
        '/nanny/list?' +
          qs.stringify({
            current: this.currentPage,
            size: this.pageSize,
          })
      )

      console.log(data)
      if (data.code == 200) {
        this.userList = data.data.records
        this.total = data.data.total
      }
      console.log(data)
    },
    //弹出框
     open() {
        this.$alert('此功能正在开发中，敬请期待', 'sorry！', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              // message: `action: ${ action }`
              message:'请谅解！'
            });
          }
        })
      },
    // 查询用户信息
    async search() {
      const { data } = await this.$http.get(
        '/nanny/list?' +
          qs.stringify({
            name: this.searchVal,
            current: this.currentPage,
            size: this.pageSize,
          })
      )

      if (data.code == 200) {
        this.userList = data.data.records
        this.total = data.data.total
        this.searchContent = ''
      } else {
        this.$message.error('查询用户不存在')
      }
    },
    goDetail(id) {
      console.log(id)
      this.$router.push('carddetails/' + id)
    },
    // 分页
    handleSizeChange(pageSize) {
      this.currentPage = 1
      this.pageSize = pageSize
      this.getUserList()
    },
    // 跳转页数
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getUserList()
    },
    // 排序
    indexSort(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1
    },
  },
}
</script>

<style lang="less" scoped>
//
.amusement {
  margin-top: 6.875rem;
  position: relative;
  background-color: #fff;
  .block {
    position: relative;
    h3 {
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translate(-50%);
    }
    p {
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translate(-50%);
    }
  }
  .hotNews {
    margin-top: 30px;
    padding: 0 60px;
    height: 80vh;
    overflow: scroll;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

p {
  font-weight: normal;
}
//美文
.artics {
  position: relative;
  width: 22rem;
  height: 18.75rem;
  padding: 50px 15px;
  margin-top: 1.875rem;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}
.card .spanList,
.show {
  position: absolute;
  right: 30px;
  top: 0.625rem;
}
.show {
  background: #000;
  color: #fff;
  padding: 2px 5px;
  border-radius: 4px;
  cursor: pointer;
}
.spanList span {
  cursor: pointer;
  display: inline-block;
  padding: 5px;
  background-color: #f6e58d;
}
.myrow {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
// 遮罩层
.mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.cards {
  position: absolute;
  padding: 3rem;
  width: 31.25rem;
  height: 37.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.markSpanList {
  span {
    margin: 0 5px;
    background: #000;
    color: #fff;
    border-radius: 4px;
  }
}
.closespan {
  z-index: 3;
}
.more {
  align-self: flex-end;
  cursor: pointer;
}
//笑话
.my-joke {
  height: 12.5rem;
  overflow: scroll;
}
// 保姆列表
.mainBox {
  margin: 15px 145px;

  display: flex;
  flex-direction: row;
  align-content: flex-start;
  margin-bottom: 0;
  background-color: rgba(248, 248, 255, 0.5);
  border-bottom: 1px solid rgba(139, 139, 122, 0.5);
}
.imgBox {
  width: 240px;
  height: 170px;
  // background-color: royalblue;
}
.imgBox img {
  margin-top: 10px;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}
.detail {
  width: 300px;
  height: 170px;
  // background-color: seagreen;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.detail ul {
  margin-left: 30px;
}
.detail ul li {
  list-style: none;
  padding-top: 8px;
}
.detail ul .name {
  font-size: 18px;
  font-weight: bold;
}
.detail ul .state{
  color:#FF0000;
}
.detail ul li + li {
  font-size: 14px;
}
.btnBox {
  flex-grow: 1;
  width: 300px;
  height: 170px;
  // background-color: tomato;
}
.btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 49px;
  margin-left: -26px;
}
.btn_home {
  background-color: rgb(30, 144, 255);
}
.btn_homev:focus,
.btn_home:hover {
  background-color: rgb(30, 144, 255) !important;
}
.btn_detail {
  background-color: rgb(175, 238, 238);
}
.search_box {
  padding-top: 10px;
}
.btn_search {
  margin-left: 0 !important;
}
.search .address {
  padding-right: 20px;
  color: #b7b7b7;
}
// 分页
.row {
  margin-top: 20px;
  padding-bottom: 100px;
}
</style>
